<template>
  <div class="draggable-product-props">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="商品">
        <span>添加商品</span>
      </a-tab-pane>
      <a-tab-pane key="2" tab="商品分组">
      </a-tab-pane>
    </a-tabs>
    <radio-selection :options="listStyleOptions" label="列表样式" selected="1"/>
    <radio-selection :options="productStyleOptions" label="商品样式" selected="1"/>
    <radio-selection :options="chamferOptions" label="商品倒角" selected="1"/>
    <radio-selection :options="imgScaleOptions" label="图片比例" selected="1"/>
    <radio-selection :options="fillStyleOptions" label="图片填充" selected="1"/>
    <radio-selection :options="textStyleOptions" label="文本样式" selected="1"/>
    <radio-selection :options="textAlignOptions" label="文本对齐" selected="1"/>
    <slider label="页面边距" :max="30" :min="0" :value="0" />
    <slider label="商品间距" :max="30" :min="0" :value="0" />
    <check-selection label="商品名称" />
    <check-selection label="商品描述" />
    <check-selection label="商品价格" />
    <check-selection label="商品原价" />
    <check-selection label="购买按钮" />
    <check-selection label="商品角标" />
  </div>
</template>

<script>
  import { RadioSelection, Slider, CheckSelection } from '@/components/Draggable/other'
  import { ListStyle, ProductStyle, ImageScale, Chamfer, FillStyle, TextAlign, TextStyle } from './Constants'
  export default {
    name: 'DraggableProductProps',
    components: {
      RadioSelection,
      Slider,
      CheckSelection
    },
    computed: {

    },
    data () {
      return {
        listStyleOptions: ListStyle,
        productStyleOptions: ProductStyle,
        imgScaleOptions: ImageScale,
        textAlignOptions: TextAlign,
        textStyleOptions: TextStyle,
        chamferOptions: Chamfer,
        fillStyleOptions: FillStyle
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
